<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿新浪固定头部</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .版面 {
            overflow: hidden;
            width: 1000px;
            height: 3000px;
            background-color: pink;
            margin: 0 auto;
        }

        .返回顶部按钮 {
            display: none; /* 显示:隐藏,  这里设置默认隐藏,下面JS里实现 显示看见 */
            width: 50px;
            left: 50%;
            margin: 0 0 0 505px;
            position: fixed;
            bottom: 60px;
            z-index: 100;
        }

        .返回顶部按钮 a {
            height: 50px;
            width: 50px;
            background: url(../素材/精灵图大图.png) 0 -600px no-repeat;
            opacity: 0.35;
            overflow: hidden;
            display: block;
            text-indent: -999em;
            cursor: pointer;
        }

        .顶部导航栏 {
            position: fixed; /* 定位:固定定位 */
            top: -80px; /* 定位偏移量, top负值 隐藏导航栏的效果 */
            left: 0;

            width: 100%;
            height: 80px;
            background-color: purple;
            text-align: center;
            color: #fff;
            line-height: 80px;
            font-size: 30px;
            transition: all .3s;
        }

        .秒杀模块 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin-top: 500px;
        }
    </style>
</head>
<body>

<div class="顶部导航栏">我是顶部导航栏</div>
<div class="版面">
    <div class="秒杀模块">秒杀模块</div>
</div>
<div class="返回顶部按钮">
    <a href="javascript:;"></a>
</div>

<!--
需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出
分析：
①：用到页面滚动事件
②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出
③：主要移动的是秒杀模块的顶部位置
-->

<script>
    // 获取DOM元素
    const 顶部导航栏 = document.querySelector('.顶部导航栏')
    const 秒杀模块 = document.querySelector('.版面 .秒杀模块')
    const 返回顶部按钮 = document.querySelector('.返回顶部按钮')

    // 监控页面滚动事件
    window.addEventListener('scroll', function () {
        const 页面头部卷去的像素 = document.documentElement.scrollTop // 实时获取滚动多少像素
        const 秒杀模块距离页面顶部的距离 = 秒杀模块.offsetTop // 秒杀模块盒子，与页面顶部的距离

        if (页面头部卷去的像素 >= 秒杀模块距离页面顶部的距离) {
            顶部导航栏.style.top = 0 // 修改定位偏移量 属性值，这里效果显示 顶部导航栏
        } else {
            顶部导航栏.style.top = '-80px' // 修改定位偏移量 属性值，效果隐藏 顶部导航栏
        }

        // 显示和隐藏 返回顶部按钮 切换
        if (页面头部卷去的像素 >= 100) {
            返回顶部按钮.style.display = 'block' // 修改显示属性
        } else {
            返回顶部按钮.style.display = 'none'
        }
    })

    // 监控点击事件, 这里点击 返回顶部按钮,页面上升的顶部
    返回顶部按钮.addEventListener('click', function () {
        // 检测页面滚动的头部距离（被卷去的头部）
        document.documentElement.scrollTop = 0 // 这里赋值0, 页面顶部0像素距离
    })
</script>

</body>
</html>